import { departmentGet } from "../../../request/xxApi";
import Department from "../../../styles/DepartmentManagement.module.css";
import { useEffect, useState } from "react";
import moment from "moment";
import { Button, Flex, Table, Space, Input, Pagination } from "antd";
import "../../../assets/xxAssets/font_4791525_1loqcwtpe32h/iconfont.css";

function DepartmentManagement() {
  const { Column, ColumnGroup } = Table;
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(9);
  const [total, setTotal] = useState(0); // 总记录数

  useEffect(() => {
    fetchData(currentPage, pageSize);
  }, [currentPage, pageSize]);

  const fetchData = async (page, size) => {
    setLoading(true);
    try {
      const res = await departmentGet({ page, size });
      const formattedData = res.data.map((item) => ({
        ...item,
        createtime: moment(item.createtime).format("YYYY-MM-DD"),
      }));
      setData(formattedData);
      setTotal(res.total); // 假设后端返回了 total 字段表示总记录数
    } catch (error) {
      console.error("Failed to fetch data:", error);
    } finally {
      setLoading(false);
    }
  };

  const columns = [
    {
      title: "科室编号",
      dataIndex: "id",
      width: 200,
    },
    {
      title: "科室创建时间",
      dataIndex: "createtime",
    },
    {
      title: "科室名称",
      dataIndex: "name",
    },
    {
      title: "科室主任",
      dataIndex: "maindoctor",
    },
    {
      title: "科室操作",
      key: "action",
      width: 170,
      render: (text, record) => (
        <Space size="middle">
          <span
            className="iconfont icon-shanchu"
            style={{ color: "#3892F7" }}
          ></span>
          <span
            className="iconfont icon-a-bianji1"
            style={{ color: "#3892F7" }}
          ></span>
        </Space>
      ),
    },
  ];

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  const start = () => {
    setLoading(true);
    setTimeout(() => {
      setSelectedRowKeys([]);
      setLoading(false);
    }, 1000);
  };

  const onSelectChange = (newSelectedRowKeys) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const hasSelected = selectedRowKeys.length > 0;

  return (
    <>
      <Flex gap="middle" vertical justifyContent="space-between">
        <Flex align="center" gap="middle">
          <div className={Department.title}>
            <div className={Department.title_left}>
              <div className={Department.title_name}>科室名称</div>
              <div>
                <Input placeholder="输入科室名称" />
              </div>
              <Button type="primary" className={Department.title_left_btn}>
                <span
                  className="iconfont icon-ic_search24px"
                  style={{ color: "white" }}
                ></span>
                查询
              </Button>
            </div>
            <Button onClick={start} disabled={!hasSelected} loading={loading}>
              删除选中
            </Button>
          </div>
        </Flex>
        <Table
          bordered="true"
          size="small"
          rowSelection={rowSelection}
          dataSource={data}
          pagination={false} // 禁用 Table 自带的分页
          rowKey="id"
        >
          {columns.map((col) => (
            <Table.Column key={col.key || col.dataIndex} {...col} />
          ))}
        </Table>
        <Pagination
          current={currentPage}
          pageSize={pageSize}
          total={total}
          onChange={handlePageChange}
        />
      </Flex>
    </>
  );
}

// 注意：handleEdit 和 handleDelete 方法需要你在组件中定义或导入
export default DepartmentManagement;
